<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>
<body>
    <div id="app">
      <my-parent></my-parent>
    </div>
    
    <template id="father">
      <div>
        父组件
        <my-son :money="1000" :mess="msg" :arr="list"></my-son>
        <my-son :person="obj"  money="102"></my-son>
      </div>
    </template>

    <template id="son">
      <div>
        子组件
        {{ money }} {{ mess }} {{ arr }} {{ person.name }} {{ person.age }} {{ person.sex }}
       </div>
    </template>
    <script>
    const Son = {
      props: {
        money:{
          // type:String,
          type:Number,
          required:true,
          default: 800
        },
        mess: {
          type:String,
          default: '我是一条默认消息'
        },
        arr: {
          type:Array,
          default: () => [1,2,3]
        },
        person: {
          type:Object,
          default: () => ({name:'cyj',age:15,sex:'女'})
        }

      },
      template: '#son'
    }
    const Father = {
      template: '#father',
      data() {
        return {
          msg: '我是一条父传子的消息',
          list: [6,7,8],
          obj: {
            name: 'lmx',
            age: 24,
            sex: '女'
          }
        }
      },
      components:{
        'mySon': Son
      }
    }

    new Vue({
      el: '#app',
      components: {
        'myParent': Father
      }
    })
    </script>
</body>
</html>